<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>安手账</title>
    <script src="js/jquery/2.0.0/jquery.min.js"></script>
    <link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
    <script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
    <script src="js/vue/2.5.16/vue.min.js"></script>
    <script src="js/axios/0.17.1/axios.min.js"></script>
    <script type="text/javascript">
        $(function(){
            var data4Vue = {
                uri:'addregister',
                result: [],
                account:{mailbox:'', password:'', repeatpassword:''},
            };
            var vue = new Vue({
                el: '#workingArea',
                data: data4Vue,
                methods: {
                    register:function(){
                        var url =  this.uri;
                        if(0==this.account.mailbox.length){
                            $("span.errorMessage").html("请输入账号");
                            $("div.registerErrorMessageDiv").css("visibility","visible");
                            return;
                        }
                        if(0==this.account.password.length){
                            $("span.errorMessage").html("请输入密码");
                            $("div.registerErrorMessageDiv").css("visibility","visible");
                            return;
                        }
                        if(0==this.account.repeatpassword.length){
                            $("span.errorMessage").html("请输入重复密码");
                            $("div.registerErrorMessageDiv").css("visibility","visible");
                            return;
                        }
                        if(this.account.password !=this.account.repeatpassword){
                            $("span.errorMessage").html("重复密码不一致");
                            $("div.registerErrorMessageDiv").css("visibility","visible");
                            return;
                        }

                        axios.post(url,this.account).then(function(response) {
                            var result = response.data;
                            if(result.code==0){
                                location.href="registerSuccess";
                            }
                            else{
                                $("span.errorMessage").html(result.message);
                                $("div.registerErrorMessageDiv").css("visibility","visible");
                            }
                        });
                    }
                }
            });
        })
    </script>
</head>
<body ng-app="app" ng-controller="MainController">
<h1>安手账用户注册</h1>
<div id="workingArea">
    <div class="registerDiv">
        <div class="registerErrorMessageDiv">
            <div class="alert alert-danger" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
                <span class="errorMessage"></span>
            </div>
        </div>

        <table cellspacing="1" style="background-color: #a0c6e5">
            <tr>
                <td>账号：</td>
                <td><input  v-model="account.mailbox" placeholder="注册邮箱"/></td>
            </tr>
            <tr>
                <td>登陆密码</td>
                <td><input v-model="account.password" type="password"  placeholder="设置你的登陆密码" > </td>
            </tr>
            <tr>
                <td>密码确认</td>
                <td><input v-model="account.repeatpassword"  type="password"  placeholder="请再次输入你的密码" > </td>
            </tr>
        </table>
        <a  @click="register"><input type="button" value="注册"/></a>
    </div>
</div>
<br />

</body>
</html>